<div>
  <md-progress-linear md-mode="indeterminate" ng-if="vm.loading"></md-progress-linear>
  <card-layout body-css="md-padding" class="centered" ng-if="!vm.loading">
    <header-section>
      <div layout="row" layout-align="center start">
        <div class="card-title">Domain Type Details</div>
        <span flex></span>
        <ng-md-icon icon="{{vm.model.icon}}" ng-style="{'fill':vm.model.iconColor}" style="padding-right:16px;" size="30"></ng-md-icon>
      </div>
    </header-section>
    <body-section>
      <form name="vm.domainTypeForm">
        <vertical-section-layout section-title="Details" on-delete="vm.onDelete()" allow-delete="vm.canDelete()" on-save-edit="vm.onSave()" on-edit="vm.onEdit()" on-cancel-edit="vm.onCancel()"
                                 editable="vm.isEditable" is-valid="vm.domainTypeForm.$valid" allow-edit="vm.allowAdmin">
          <readonly-section>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Type Name</span>

              <div flex>
                {{vm.model.title}}
              </div>
            </div>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Description</span>

              <div flex>
                {{vm.model.description}}
              </div>
            </div>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Data Type</span>

              <div flex>
                {{vm.model.field.derivedDataType}}
                <span ng-if="vm.model.field.derivedDataType == 'decimal' && vm.model.field.precisionScale">({{vm.model.field.precisionScale}})</span>
              </div>
            </div>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Regular Expression</span>

              <div flex ng-model="vm.model.$regex" rows="1" ui-codemirror="{onLoad: vm.codemirrorLoaded}" ui-codemirror-opts="vm.viewerOptions"></div>
            </div>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Tags</span>

              <md-chips ng-repeat="tag in vm.model.field.tags">
                <md-chip><strong>{{tag.name}}</strong></md-chip>
              </md-chips>
            </div>
            <div layout="row" class="layout-padding-top-bottom" layout-align="start start">
              <span flex="25" class="property-name">Icon</span>

              <div layout="column" style="height:45px">
                <ng-md-icon icon="{{vm.model.icon}}" ng-style="{'fill':vm.model.iconColor}" style="margin:inherit" size="45"></ng-md-icon>
              </div>
            </div>
            <div layout="row" class="layout-padding-top-bottom">
              <span flex="25" class="property-name">Rules</span>

              <div flex>
                <ul class="layout-padding-left-16" style="margin:0">
                  <li ng-repeat="rule in vm.getAllFieldPolicies(vm.model)">{{rule.name}}</li>
                </ul>
              </div>
            </div>
          </readonly-section>
          <editable-section>
            <md-input-container class="md-block">
              <label>Title</label>
              <input ng-model="vm.editModel.title" ng-required="true"/>
            </md-input-container>

            <md-input-container class="md-block">
              <label>Description</label>
              <input ng-model="vm.editModel.description"/>
            </md-input-container>

            <div layout="row" style="margin-top:-18px">
              <md-input-container flex class="md-block">
                <md-select ng-model="vm.editModel.field.derivedDataType" placeholder="Data Type" ng-change="vm.onDataTypeChange()">
                  <md-option ng-value=""><em>None</em></md-option>
                  <md-option ng-repeat="dataType in vm.availableDefinitionDataTypes | orderBy:'toString()' track by $index" value="{{dataType}}" aria-label="{{dataType}}">
                    {{dataType}}
                  </md-option>
                </md-select>
                <div ng-messages="vm.domainTypeForm.precisionScale.$error" md-auto-hide="false">
                  <div ng-message="pattern">Format expected in form precision, scale (e.g. 10,0)</div>
                </div>
              </md-input-container>
              <md-input-container flex="10" ng-if="vm.editModel.field.derivedDataType == 'decimal'">
                <label>Precision</label>
                <input ng-model="vm.editModel.field.precisionScale" placeholder="10,0" ng-pattern="/^\d+,\d+$/" name="precisionScale">
              </md-input-container>
            </div>

            <div layout="row">
              <md-input-container class="md-block" flex="95">
                <label>Regular Expression</label>
                <div flex name="regexPattern" ng-model="vm.editModel.regexPattern" rows="1" ui-codemirror="{onLoad: vm.codemirrorLoaded}" ui-codemirror-opts="vm.editorOptions"></div>
                <div ng-messages="vm.domainTypeForm.regexPattern.$error" md-auto-hide="false">
                  <div ng-message="syntaxError">{{vm.regexpSyntaxError}}</div>
                </div>
              </md-input-container>
              <md-menu flex="5">
                <md-button class="md-icon-button md-accent" arial-label="Open expression flags menu" ng-click="$mdMenu.open($event)">
                  <ng-md-icon icon="flag"></ng-md-icon>
                </md-button>
                <md-menu-content>
                  <md-menu-item ng-repeat="regexpFlag in vm.regexpFlags">
                    <md-list-item title="{{regexpFlag.description}}">
                      <md-checkbox ng-model="vm.editModel.$regexpFlags[regexpFlag.flag]"></md-checkbox>
                      <p>{{regexpFlag.title}}</p>
                    </md-list-item>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </div>

            <md-input-container class="md-block flex-gt-xs" flex-gt-xs>
              <label class="label-small md-container-ignore">Tags</label>
              <md-chips ng-model="vm.editModel.field.tags" md-autocomplete-snap md-transform-chip="vm.transformChip($chip)" md-require-match="false">
                <md-autocomplete md-selected-item="vm.tagChips.selectedItem" md-search-text="vm.tagChips.searchText" md-items="item in vm.feedTagService.querySearch(vm.tagChips.searchText)"
                                 md-item-text="item.name" placeholder="Add a Tag">
                  <span md-highlight-text="vm.tagChips.searchText">{{item.name}}</span>
                </md-autocomplete>
                <md-chip-template>
                  <span>
                    <strong>{{$chip.name}}</strong>
                  </span>
                </md-chip-template>
              </md-chips>
            </md-input-container>

            <div layout="column" style="margin:18px 0">
              <div layout="row" layout-align="start start" class="layout-padding-top-bottom">
                <span class="md-input-label" style="font-size: 11px;" flex="25">Icon </span>
                <ng-md-icon icon="{{vm.editModel.icon}}" size="45" style="margin:inherit" ng-style="{'fill':vm.editModel.iconColor}"></ng-md-icon>
                <md-button class="md-primary" ng-click="vm.showIconPicker()" style="margin-left:35px;">Change Icon</md-button>
              </div>
            </div>

            <div layout="column" style="margin:18px 0">
              <div layout="row" layout-align="start start" class="layout-padding-top-bottom">
                <span class="md-input-label" style="font-size: 11px;" flex="25">Rules </span>
                <div ng-click="vm.showFieldRuleDialog(vm.editModel)" style="color:#2D78B1;">
                  <md-button class="icon-btn" style="padding-left:2px;padding-right:2px;">
                    <ng-md-icon icon="add_circle_outline" style="fill:#2D78B1;"></ng-md-icon>
                  </md-button>
                  ADD
                </div>
                <div ng-if="vm.hasFieldPolicies(vm.editModel)" class="orange layout-padding-bottom" style="padding-left:32px;" layout="column">
                  <span ng-if="vm.editModel.fieldPolicy.standardization.length > 0">{{vm.editModel.fieldPolicy.standardization.length}} Standardizers</span>
                  <span ng-if="vm.editModel.fieldPolicy.validation.length > 0">{{vm.editModel.fieldPolicy.validation.length}} Validators</span>
                </div>
              </div>
            </div>
          </editable-section>
        </vertical-section-layout>
      </form>
    </body-section>
  </card-layout>
</div>
